<template>
  <div>
    <el-container v-if="!$store.state.global.lockScreenData">
      <el-header>
        <headerTop></headerTop>
      </el-header>
      <el-container class="contEL">
        <el-aside width="240">
          <asideLeft></asideLeft>
        </el-aside>

        <el-main>
          <div class="mainBox">
            <crumbs
              v-if="this.$route.path != '/principalSheet'"
            ></crumbs>


            <div class="zhanhsi"> 
              <router-view />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <lockScreen v-if="$store.state.global.lockScreenData"></lockScreen>
  </div>
</template>

<script>
import asideLeft from "@/views/components/asideLeft.vue";
import headerTop from "@/views/components/headerTop.vue";
import crumbs from "@/views/components/crumbs.vue";
import lockScreen from '@/views/components/lockScreen/lockScreen.vue'
export default {
  name: "home",
  components: { asideLeft, headerTop, crumbs,lockScreen },
  data() {
    return {
      isTrue: false,
    };
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background: linear-gradient(90deg, #0973c0 0%, #5ce6e6 100%);
  color: #333;
  height: 60px;
}
.contEL {
  height: calc(100vh - 60px);
}
.el-aside {
  background-color: #2a3764;
  color: #333;
  height: 100%;
  overflow: hidden ;
  width: 240px !important;
  /deep/.el-menu {
    width: 100%;
    background-color: #2a3764a1;
    border: none;
    li {
      color: #ffffff;
      &:hover {
        background-color: rgba(1, 165, 141, 0.5);
      }
      .el-submenu__title {
        &:hover {
          background-color: rgba(1, 165, 141, 0.5);
        }
        i {
          color: #ffffff;
        }
        span {
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
  }
}

.el-main {

  padding: 0px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .mainBox {
    height: 100%;
    .zhanhsi{
      height: calc(100% - 81px);
      padding: 16px 16px 29px 16px;
      overflow: hidden;
      background-color: #F2F3F5;
    }
  }
}
/deep/.is-active {
  background-color: rgba(1, 165, 141, 0.5);
}
</style>
